ul{
    list-style-type: none;
    margin: 0;
    padding:0; 
}
ul.titles li.title{
    float: left;
    width: 100px;
    height: 48px;
    line-height: 48px;
    font-size: 24px;
    text-align: center;
}
ul.titles li.title.active{
    border: 1px solid #ccc;
}

ul.titles::after{/*清除浮动*/
    content: '';
    display: block;
    clear: both;
}
ul.contents li.content{
width: 300px;
height: 150px;
border: 1px solid #ccc;
display: none;

}

ul.contents li.content.active{
    display: block;
}